<template>
	<view class="content">
		<view class="PhotoCla">
			<view class="titleCla">
				<text>头像</text>
				<text style="color: red;font-size: 20rpx;">(点击头像更换)</text>
			</view>
			<view class="division"></view>
			<view>
				<image :src="headPhoto" class="imgCla" @tap="addl"></image>
			</view>
		</view>
		<view class="nameCla">
			<view class="titleCla">名字</view>
			<view class="division"></view>
			<input v-model="name" class="inputCla" @blur="leaveIpu" :style="{background: judge ? '#F0E68C' : ''}"/>
		</view>
		<button type="primary" class="btn" @tap="updataFun">确认修改</button>
	</view>
</template>
<script>
	import qiniu from "../../../common/qiniuUploader.js"
	export default {
		data() {
			return {
				headPhoto: "",
				name: "",
				judge: false,
				token: "",
				user_id: "",
				sex: ""
			}
		},
		
		onLoad() {
			try {
				this.name = uni.getStorageSync('userif_list').nick_name
				this.headPhoto = uni.getStorageSync('userif_list').avatar
				this.user_id = uni.getStorageSync('userif_list').user_id
				this.sex = uni.getStorageSync('userif_list').sex
			}catch(e){}
		},
		
		methods: {
			
			updataFun() {
				let me = this
				uni.showModal({
				    title: '是否修改',
				    content: '确认修改将重新登录',
				    success: function (res) {
				        if (res.confirm) {
				            me.$myRequest({
				            	url: "/userInfo/update",
				            	methed: "post",
				            	header: {
				            		'content-type' : 'application/json'
				            	},
				            	data: {
				            		user_id: me.user_id,
				            		avatar: me.headPhoto,
				            		sex: me.sex,
				            		birth: "2020-11-11 20:20:20",
				            		nick_name: me.name
				            	}
				            }).then((res) => {
				            	if(res.code == 0){
									me.$userInfoRefresh(me.user_id)
				            		try{
										this.name = uni.getStorageSync('userif_list').nick_name
										this.headPhoto = uni.getStorageSync('userif_list').avatar
										this.user_id = uni.getStorageSync('userif_list').user_id
										this.sex = uni.getStorageSync('userif_list').sex
				            		}catch(e){}
				            	}
				            })
							
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				})
			},
			
			leaveIpu() {
				if(this.name === "") {
					this.judge = true
				}else {
					this.judge = false
				}
			},
			
			to(){
				this.key = Math.ceil(Math.random()*1000000)
				uni.request({
					url:"https://www.curiousmore.com/qmore/push/upload/getToken",
					data:{
						key:this.key
					},
					method:"post",
					success:(res) => {
						this.token = res.data.data
					}
				})
			},
			addl(){
				let me = this
				uni.showActionSheet({
				  itemList: ['从手机相册选择', '拍照'],
				  success: function(res) {
					let aa = []
					if(res.tapIndex == 1){
						aa = ["camera"]
					}else{
						aa = ["album"]
					}
					me.to()
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: aa,
						success:(res_) => {
							let filePath = res_.tempFilePaths[0]
							if(me.token != ""){
								qiniu.upload(filePath, (res) => {
									me.headPhoto = res.fileUrl
								}, (error) => {
									console.log('error: ' + error);
								}, {
									region: 'ECN',
									domain: 'http://img.curiousmore.com', 
									key: me.key, 
									uptoken: me.token, 
								}, (res) => {
									
								}, () => {
									// 取消上传
								}, () => {
									// `before` 上传前执行的操作
								}, (err) => {
									// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
								});
							}
						}
					})
				  },
				fail: function(res) {
				    console.log(res.errMsg)
				  }
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		width: 750rpx;
		box-sizing: border-box;
		padding: 50rpx;
		.PhotoCla {
			.imgCla {
				width: 150rpx;
				height: 150rpx;
				border-radius: 15rpx;
			}
		}
		.division {
			height: 2rpx;
			width: 100%;
			background:	#C0C0C0;
			margin: 20rpx 0;
		}
		.inputCla {
			background: #FFFFFF;
			width: 100%;
			height: 70rpx;
			box-sizing: border-box;
			padding: 0 10rpx;
			font-size: 28rpx;
			border-radius: 10rpx;
		}
		.titleCla {
			font-size: 28rpx;
			color: #FF7300;
		}
		.btn {
			width: 100%;
			margin-top: 30rpx;
		}
	}
	
</style>